<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    html, body { margin: 0; padding: 0; }
  </style>

  <script src="/lib/vue.runtime.global.prod.js"></script>
  <script src="/lib/vue-demi.iife.js"></script>

  <script type="module">
    import { createApp, reactive, h, computed, watchEffect } from 'vue'
    import { computedAsync } from '@vueuse/core'
    import { Render } from 'el-lowcode'

    const schema = computedAsync(() => {
      const str = new URLSearchParams(location.href.split('?')[1]).get('schema')

      try {
        const qs = new URLSearchParams(location.href.split('?')[1])
        const schema = qs.get('schema'), file = qs.get('file')

        if (schema) {
          return JSON.parse(schema)
        }
        else if (file) {
          return file.endsWith('.js') ? import(/* @vite-ignore */ file).then(e => e.default) : fetch(file).then(e => e.json())
        }
      }
      catch (e) {
        console.error(e)
        return { is: 'h1', children: '404' }
      }
    })

    watchEffect(() => {
      console.log(schema.value)
    })

    const loading = h('h1', { style: 'margin-top: 45vh; text-align: center;' }, 'Loading……')

    createApp(() => schema.value
      ? h(Render, { schema: schema.value }, { loading })
      : loading
    )
      .mount(document.body)
  </script>
</head>
<body>

</body>
</html>